<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>销售工具</el-breadcrumb-item>
                <el-breadcrumb-item>厂商列表</el-breadcrumb-item>
            </el-breadcrumb>



            <div class="btnBox">
                <el-button type="primary" size="small" @click="addHandle">添加厂商</el-button>

                <el-input size="small" placeholder="请输入厂商名称" clearable @clear="clearInput" v-model="searchName"
                    class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="searchHandle"></el-button>
                </el-input>
            </div>

            <el-table :data="factoryList" border style="width: 100%" height="620"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="factoryId" label="ID" width="100"></el-table-column>
                <el-table-column prop="factoryName" label="厂商名称"></el-table-column>
                <el-table-column prop="productStatus" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.factoryStatus == 1">启用</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width='150'>
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-top" @click="statusHandle(scope.row, 1)"
                            v-if="scope.row.factoryStatus == 0" plain>启用</el-button>
                        <el-button size="small" @click="statusHandle(scope.row, 0)" icon="el-icon-bottom"
                            v-else>禁用</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[20, 50, 100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>


            <el-dialog title="添加厂商" :visible.sync="dialogVisible" width="20%" top="4%" :before-close="handleClose">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="厂商名称" prop="factoryName">
                        <el-input v-model="form.factoryName" placeholder="请输入厂商名称"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitHandle">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>

import { addFactory, getFactoryByName, updateFactoryDown } from '../../network/factory'

export default {
    name: 'product',
    data() {
        return {
            factoryList: [],
            dialogVisible: false,
            form: {
                factoryName: '',
                factoryStatus: 1
            },
            rules: {
                factoryName: [
                    { required: true, message: '请输入厂商名称', trigger: 'blur' },
                ],
            },
            pageNum: 1,
            pageSize: 20,
            total: 0,
            searchName: '',
        }
    },
    created() {
        this.getList()
    },
    methods: {
        statusHandle(obj, flag) {
            updateFactoryDown({
                factoryId: obj.factoryId,
                status: flag
            }).then(res => {
                if (res.flag) {
                    this.getList()
                    this.$message.success('操作成功')
                } else {
                    this.$message.warning('操作失败')
                }
            })
        },

        submitHandle() {
            this.$refs.ruleForm.validate((valid) => {
                console.log(valid);

                if (!valid) return

                console.log(this.form);

                addFactory({
                    factoryName: this.form.factoryName,
                    factoryStatus: this.form.factoryStatus,
                    companyId: sessionStorage.companyId
                }).then(res => {
                    console.log(res);
                    if (res.flag) {
                        this.getList();
                        this.handleClose();
                        this.dialogVisible = false
                        this.$message.success("添加成功");
                    } else {
                        console.log(res);
                        this.$message.success("添加失败");
                    }
                });
            });

        },
        addHandle() {
            this.dialogVisible = true
        },
        handleClose() {
            this.dialogVisible = false

            this.$refs.ruleForm.resetFields()
        },

        getList() {
            getFactoryByName({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                factoryName: this.searchName,
                companyId: sessionStorage.companyId
            }).then(res => {
                if (res.flag) {
                    console.log(res);
                    this.factoryList = res.data.list
                    this.total = res.data.total
                }
            })
        },

        handleSizeChange(val) {
            this.pageSize = val
            this.getList()
        },
        handleCurrentChange(val) {
            this.pageNum = val
            this.getList()
        },
        searchHandle() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },
        clearInput() {
            this.pageNum = 1
            this.pageSize = 20
            this.getList()
        },


    }
}
</script>

<style lang="less" scoped>
.paginationBox {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}


.input-with-select {
    margin-left: 15px;
    width: 300px;
}

.btnBox {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
</style>